import React, { useState, useRef, useEffect } from 'react'
import { PageHeader, Steps, Button, Form, Input, Select, message, notification } from 'antd'
import { newCategories, addNews } from '@api'
import style from './index.module.scss'
import NewsEditor from '@components/SandBox/NewsEditor'

export default function NewsAdd(props) {
  /*--------------------------------------state--------------------------------------------------------------------------*/
  /*--------------------------------------state--------------------------------------------------------------------------*/
  /*--------------------------------------state--------------------------------------------------------------------------*/
  /*--------------------------------------state--------------------------------------------------------------------------*/
  // 进度步骤号
  const [current, setCurrent] = useState(0)
  // 定义form的ref
  const NewsForm = useRef(null)
  // 新闻分类
  const [categoryList, setCategoryList] = useState([])
  // 第一页表单数据
  const [formInfo, setformInfo] = useState({})
  // 第二页富文本数据
  const [content, setContent] = useState("")
  // antd的栅格，一共24份
  const layout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 22 },
  }
  // 用户信息
  const User = JSON.parse(localStorage.getItem("token"))
  /*--------------------------------------hooks调用方法-----------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法-----------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法-----------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法-----------------------------------------------------------------*/
  useEffect(() => {
    getNewCategories()
  }, [])
  /*--------------------------------------方法--------------------------------------------------------------------------*/
  /*--------------------------------------方法--------------------------------------------------------------------------*/
  /*--------------------------------------方法--------------------------------------------------------------------------*/
  /*--------------------------------------方法--------------------------------------------------------------------------*/
  // 下一步
  const handleNext = () => {
    if (current === 0) {
      NewsForm.current.validateFields().then(res => {
        setformInfo(res)
        setCurrent(current + 1)
      })
    } else {
      if (content === "" || content.trim() === "<p></p>") {
        message.error("新闻内容不能为空")
      } else {
        setCurrent(current + 1)
      }
    }
  }
  // 上一步
  const handlePrevious = () => {
    setCurrent(current - 1)
  }
  // 获取新闻分类
  const getNewCategories = () => {
    newCategories().then((res) => {
      setCategoryList(res.data)
    })
  }
  const handleSave = (auditState) => {
    addNews({
      ...formInfo,
      "content": content,
      "region": User.region ? User.region : "全球",
      "author": User.username,
      "roleId": User.roleId,
      "auditState": auditState,
      "publishState": 0,
      "createTime": Date.now(),
      "star": 0,
      "view": 0,
    }).then((res) => {
      notification.info({
        message: `通知`,
        description:
          `您可以到${auditState === 0 ? '草稿箱' : '审核列表'}中查看您的新闻`,
        placement: "bottomRight"
      })
      props.history.push(auditState===0?'/news-manage/draft':'/audit-manage/list')
    })
  }
  /*--------------------------------------jsx--------------------------------------------------------------------------*/
  /*--------------------------------------jsx--------------------------------------------------------------------------*/
  /*--------------------------------------jsx--------------------------------------------------------------------------*/
  /*--------------------------------------jsx--------------------------------------------------------------------------*/
  return (
    <div>
      <PageHeader className="site-page-header" title="撰写新闻" subTitle="This is a subtitle" />
      <Steps current={current}>
        <Steps.Step title="基本信息" description="新闻标题，新闻分类" />
        <Steps.Step title="新闻内容" description="新闻主体内容" />
        <Steps.Step title="新闻提交" description="保存草稿或者提交审核" />
      </Steps>
      <div style={{ marginTop: "50px" }}>
        <div className={current === 0 ? '' : style.active}>
          <Form name="basic" ref={NewsForm} {...layout}>
            <Form.Item label="新闻标题" name="title" rules={[{ required: true, message: 'Please input your username!' }]} >
              <Input />
            </Form.Item>
            <Form.Item label="新闻分类" name="categoryId" rules={[{ required: true, message: 'Please input your username!' }]} >
              <Select>
                {
                  categoryList.map(item =>
                    <Select.Option value={item.id} key={item.id}>{item.title}</Select.Option>
                  )
                }
              </Select>
            </Form.Item>
          </Form>
        </div>
        <div className={current === 1 ? '' : style.active}>
          <NewsEditor getContent={(value) => { setContent(value) }} />
        </div>
        <div className={current === 2 ? '' : style.active}></div>
      </div>
      <div style={{ marginTop: "50px" }}>
        {
          current > 0 ? <Button type="primary" onClick={handlePrevious}>上一步</Button> : ''
        }
        {
          current < 2 ? <Button onClick={handleNext}>下一步</Button> : ''
        }
        {
          current === 2 ?
            <span>
              <Button type="primary" onClick={() => handleSave(0)}>保存草稿</Button>
              <Button danger onClick={() => handleSave(1)}>提交审核</Button>
            </span>
            :
            ''
        }
      </div>
    </div >
  );
}
